
<template>
    <el-card class="m-8">
      <section slot="header" class="mb-4">
        <div class="checkedBox">
            <span>用户ID：</span>
            <el-input v-model="listQuery.user_id" placeholder="请输入" size="normal" clearable></el-input>
            <span style="text-align: right;">爵位等级：</span>
            <el-select v-model="listQuery.royal_id" >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                aria-placeholder="请选择">
              </el-option>
            </el-select>
            <span style="text-align: right;">到期时间：</span>
            <el-date-picker
                v-model="listQuery.start_time"
                clearable
                placeholder="开始时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <el-date-picker
                class="ml-4 mr-4"
                v-model="listQuery.end_time"
                clearable
                placeholder="结束时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
        </div>
      </section>
  
      <el-table :data="tableList" align="center" border stripe>
        <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
        <el-table-column label="用户id" prop="user.user_id"></el-table-column>
        <el-table-column label="用户昵称" prop="user.nickname"></el-table-column>
        <el-table-column label="用户编号" prop="user.user_code"></el-table-column>
        <el-table-column label="用户头像" prop="user.head_picture">
          <template slot-scope="scoped">
            <img
              :src="scoped.row.user.head_picture"
              alt=""
              style="width: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column label="爵位等级" prop="royal.name"/>
        <el-table-column label="开通时间" prop="upgrade_time"/>
        <el-table-column label="到期时间" prop="expired_time"/>
  
        <!-- <el-table-column align="center" label="操作" width="300">
          <template slot-scope="{row}">
            <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
  
      <cus-pagination
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="initData"
      />

    </el-card>
  
  
</template>
  
<script>

  import { 
    adminRoyalUserList,
    adminRoyalUserExport,
    adminRoyalList
  } from '@/api/nobilityManagement'
  
  export default {
    data() {
      return {
        options: [],
        tableList: [],
        listQuery: {
          page: 1,
          perPage: 10,
          user_id: undefined,
          royal_id: undefined,
          start_time: undefined,
          end_time: undefined
        },
        meta: {
          page: 1,
          perPage: 10
        },
        total: 0,
      }
    },
    created() {
      this.initData()
      this.getRoyalList()
    },
    methods: {
      indexMethod(index) {
          return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
      },
      handleSearch() {
        this.listQuery.page = 1
        this.initData()
      },
      handleReset() {
        this.listQuery = {
          page: 1,
          perPage: 10,
        }
        
        this.initData()
      },
      handleExport() {
        adminRoyalUserExport(this.listQuery).then((result) => {
          if(result.code === 200) {
            location.href = result.data.download_url
          }
        }).catch((err) => {
          
        });
      },
      async initData() {
        try {
          for (let key in this.listQuery) {
            this.listQuery[key] = !this.listQuery[key] ? undefined : this.listQuery[key]
          }
          const { data } = await adminRoyalUserList(this.listQuery)
          this.total = data.total
          this.tableList = data.data
          
        } catch (e) {
          console.error(e)
        }
      },
      async getRoyalList() {
        const { data } = await adminRoyalList({
          page: 1,
          perPage: 100
        })
				this.options = data.data
      }
    }
}
</script>
  
<style scoped lang="scss">
::v-deep {
    .checkedBox {
        .el-input {
            width: 250px !important;
        }
    }
}
.checkedBox {
    display: flex;
    align-items: center;
    
    span {
        width: 100px;
    }
}
</style>
  